<template>
	<view>
		<u-navbar :is-back="false" title="甜诺烘焙" :background="navbarBg" :border-bottom="false" ></u-navbar>
		<view>
			<view class="u-m-t-20 u-m-b-20">
				<u-tabs :list="tabList" :is-scroll="false" :current="currentTab"
						:height="80" :bar-width="80" :offset=[20,90]
						active-color="#f29100" inactive-color="#000000" bg-color="none"
						@change="tabChange"></u-tabs>
			</view>
			<u-gap height="4" bg-color="#ffffff"></u-gap>
			<scroll-view :scroll-x="false" scroll-y="true" class="no-scroll-bar"  :style="'height:'+scrollViewHeight+'px'">
				<!-- 今日订单 -->
				<view v-show="currentTab==0">
					<!-- 有订单 -->
					<view class="u-p-20"  v-if="orderList.length>0" >
						<order-list :orderList="orderList" @payCountDownEnd="payCountDownEnd" @toOrderDetail="toOrderDetail"></order-list>
					</view>
					<!-- 订单为空 -->
					<view v-else>
						<view style="margin-top: 100rpx;margin-bottom: 20rpx;">
							<empty :src="'/static/images/order/order-empty-1.png'" :textArr="['您还没有下单','快去犒劳一下自己吧~']"></empty>
						</view>
						<view class="u-flex u-row-center u-col-center">
							<view style="width: 36%;">
								<u-button shape="circle" :custom-style="customBtnStyle"  type="warning">去点餐</u-button>
							</view>
						</view>
					</view>
				</view>
				<!-- 历史订单 -->
				<view v-if="currentTab==1">
					<view>
						<u-tabs :list="hisTabList" :is-scroll="false" :current="hisCurrentTab"
								:height="80" :bar-width="60" :offset=[20,80]
								active-color="#f29100" inactive-color="#000000" bg-color="none"
								@change="hisTabChange"></u-tabs>
					</view>
					<view v-if="historyOrderList.length>0">
						<view class="u-p-20">
							<order-list :orderList="historyOrderList" @toOrderDetail="toOrderDetail"></order-list>
						</view>
					</view>
					<view v-else>
						<!-- 历史订单为空 -->
						<view v-if="historyOrderList.length<1"  style="margin-top: 100rpx;margin-bottom: 20rpx;" >
							<empty :src="'/static/images/order/order-empty-1.png'" :textArr="['很遗憾,','您还没有历史订单哦~']"></empty>
						</view>
						<view class="u-flex u-row-center u-col-center">
							<view style="width: 36%;">
								<u-button shape="circle" :custom-style="customBtnStyle"  type="warning">去点餐</u-button>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import empty from '@/components/empty/empty.vue';
	import orderList from '@/components/order-list/order-list.vue';
	import {tempOrderList,tempHistoryOrderList,addHistoryOrder,subPayTimeoutOrder} from "@/util/data/order.js"; 
	export default {
		components:{
			empty,orderList,
		},
		watch:{
			orderList:function(orderList){
				console.log("监听到订单列表有变化");
				this.tabList[0].count=this.orderList.length;
			}	
		},
		data() {
			return {
				scrollViewHeight:400,
				currentTab:0,
				tabList:[
					{name:'今日订单',count:2},
					{name:'历史订单'}
				],
				hisCurrentTab:0,
				hisTabList:[
					{name:'全部'},
					{name:'自取'},
					{name:'外卖'}
				],
				historyOrderList:[],
				orderList:[],
				customBtnStyle:{
					height:'70rpx'
				},
			
				
			};
		},
		
		created:function(){
			let height= this.$u.sys().windowHeight;	
			// #ifdef MP-WEIXIN
			this.scrollViewHeight=height*0.78;
			// #endif
			// #ifndef MP-WEIXIN
			this.scrollViewHeight=height*0.86;
			// #endif
			console.log("scrollviewHeight",this.scrollViewHeight);
			this.getOrderList();
		},
		
		
		methods:{
			//当前订单和历史订单切换事件
			tabChange:function(index){
				this.currentTab=index;
				if(this.currentTab==0){
					this.getOrderList();
				}else{
					this.hisCurrentTab=0;
					this.getHistoryOrderList();
				}
			},
			//获取订单列表
			getOrderList:function(){
				let that=this;
				that.orderList=tempOrderList;
				this.tabList[0].count=this.orderList.length;
			},
			//当前订单支付超时
			payCountDownEnd:function(order){
				let that=this;
				console.log("====超时支付的订单==========",order);
				let orderList= that.orderList.filter(function(item){
					return item.id!=order.id;
				})
				that.orderList=orderList;
				order.payStatus=3;
				order.payCountDown=0;
				subPayTimeoutOrder(order);//当前订单减少
				addHistoryOrder(order);//历史订单增加
			},
			//跳转订单详情
			toOrderDetail:function(order){
				console.log("跳转订单详情",order);
				this.$u.route({
					url:'/pages/common/order/order-detail',
					params:{
						orderId:order.id
					}
				})
			},
			//获取历史订单
			getHistoryOrderList:function(){
				let that=this;
				that.historyOrderList=tempHistoryOrderList;
			},
			//历史订单下，自取方式和外卖方式订单切换事件
			hisTabChange:function(index){
				this.hisCurrentTab=index;
				if(index==1){
					this.historyOrderList=tempHistoryOrderList.filter(function(item){
						return item.deliveryWay==0;
					});
				}else if(index==2){
					this.historyOrderList=tempHistoryOrderList.filter(function(item){
						return item.deliveryWay==1;
					});
				}else {
					this.historyOrderList=tempHistoryOrderList;
				}
			}
		}
	}
</script>

<style lang="scss">

</style>
